<template>
	<view class="container">
		<!-- 标题 -->
		<view class="header">
			<text class="title">pages.json 主题设置</text>
			<text class="subtitle">深色模式配置说明</text>
		</view>

		<!-- 配置说明卡片 -->
		<view class="section">
			<text class="section-title">配置文件</text>

			<view class="config-card">
				<text class="config-name">theme.json</text>
				<text class="config-desc">定义浅色和深色主题的颜色变量</text>
				<view class="code-block">
					<text class="code-text" space="ensp">{{ JSON.stringify(code, null, 2) }}</text>
				</view>
			</view>

			<view class="config-card">
				<text class="config-name">manifest.json</text>
				<text class="config-desc">启用深色模式支持</text>
				<view class="code-block">
					<text class="code-text" space="ensp">{{ JSON.stringify(manifest, null, 2) }}</text>
				</view>
			</view>

			<view class="config-card">
				<text class="config-name">pages.json</text>
				<text class="config-desc">使用 @ 引用主题变量</text>
				<view class="code-block">
					<text class="code-text" space="ensp">{{ JSON.stringify(globalStyle, null, 2) }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: {
					"light": {
						"navBgColor": "#ffffff",
						"navTxtStyle": "black",
						"bgColor": "#f5f5f5"
					},
					"dark": {
						"navBgColor": "#1a1a1a",
						"navTxtStyle": "white",
						"bgColor": "#000000"
					}
				},
				manifest: {
					"darkmode": true,
					"themeLocation": "theme.json"
				},
				globalStyle: {
					"backgroundColor": "@bgColor"
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		padding: 20px;
		background-color: var(--page-bg);
	}

	.header {
		text-align: center;
		margin-bottom: 30px;
	}

	.title {
		display: block;
		font-size: 24px;
		font-weight: bold;
		color: var(--text-primary);
		margin-bottom: 10px;
	}

	.subtitle {
		display: block;
		font-size: 14px;
		color: var(--text-secondary);
	}

	.section {
		margin-bottom: 20px;
	}

	.section-title {
		display: block;
		font-size: 16px;
		font-weight: bold;
		color: var(--text-primary);
		margin-bottom: 12px;
	}

	.config-card {
		background-color: var(--card-bg);
		border-radius: 8px;
		padding: 16px;
		margin-bottom: 12px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	}

	.config-name {
		display: block;
		font-size: 16px;
		font-weight: bold;
		color: var(--primary-color);
		margin-bottom: 6px;
	}

	.config-desc {
		display: block;
		font-size: 14px;
		color: var(--text-secondary);
		margin-bottom: 10px;
		line-height: 1.6;
	}

	.code-block {
		background-color: var(--page-bg);
		border-radius: 4px;
		padding: 10px;
		border-left: 2px solid var(--primary-color);
	}

	.code-text {
		display: block;
		font-size: 12px;
		font-family: 'Courier New', monospace;
		color: var(--text-primary);
		line-height: 1.8;
	}
</style>